<template>
  <div>
    <!-- 搜索卡片区 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>全部图文</span>
      </div>
      <el-form ref="form" :model="serchForm" label-width="100px">
        <el-form-item label="文章状态:">
          <el-radio v-model="serchForm.status" label>全部</el-radio>
          <el-radio v-model="serchForm.status" label="0">草稿</el-radio>
          <el-radio v-model="serchForm.status" label="1">待审核</el-radio>
          <el-radio v-model="serchForm.status" label="2">审核通过</el-radio>
          <el-radio v-model="serchForm.status" label="3">审核失败</el-radio>
          <el-radio v-model="serchForm.status" label="4">已删除</el-radio>
        </el-form-item>

        <el-form-item label="频道列表:">
          <el-select v-model="serchForm.channel_id" placeholder="请选择" clearable>
            <el-option
              v-for="item in channelList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              value-format="yyy-MM-dd"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="时间选择:">
          <el-date-picker
            v-model="timetotime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 文章列表卡片区 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>共找到{{tot}}条符合条件数据</span>
      </div>
      <!-- 匿名插槽，内容主体 -->
      <div class="text item">
        <!-- table表格组件应用 -->
        <el-table :data="articleList" style="width: 100%">
          <el-table-column label="图标">
            <img
              :src="stdata.row.cover.images[0]"
              alt="没有图标"
              slot-scope="stdata"
              width="150"
              height="100"
            />
          </el-table-column>
          <el-table-column prop="title" label="标题" width="180"></el-table-column>
          <el-table-column prop="status" label="状态" width="180">
            <!-- 优化统一使用作用域插槽 -->
            <template slot-scope="stdata">
              <el-tag v-if="stdata.row.status===0" >草稿</el-tag>
            <el-tag  v-else-if="stdata.row.status===1" >待审核</el-tag>
            <el-tag  v-else-if="stdata.row.status=== 2" >审核通过</el-tag>
            <el-tag v-else-if="stdata.row.status=== 3" >审核失败</el-tag>
            <el-tag  v-else>已删除</el-tag>

            </template>

          </el-table-column>
          <el-table-column prop="pubdate" label="发表时间"></el-table-column>
          <el-table-column label="操作">
            <!-- 在这里写操作的内容 -->
            <el-button size="mini" type="primary">修改</el-button>
            <el-button size="mini" type="danger">删除</el-button>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  watch: {
    timetotime: function (newv, oldv) {
      if (newv) {
        this.serchForm.begin_pubdate = newv[0]
        this.serchForm.end_pubdate = newv[1]
      } else {
        this.serchForm.begin_pubdate = ''
        this.serchForm.end_pubdate = ''
      }
    }
  },
  name: 'ArticleList',
  data () {
    return {
      articleList: [], // 文章列表
      channelList: [], // 频道列表
      timetotime: '', // 日期显示的中间转换数据
      serchForm: {
        status: '', // 文章状态，0-草稿
        channel_id: '', // 频道
        begin_pubdate: '',
        end_pubdate: '',
        page: 1, // 默认取第一页的数据
        per_page: 10 // 每页取10条数据记录
      },
      tot: 0 // 文章总记录长度
    }
  },
  created () {
    this.getChannelList()
    this.getArticleList()
  },
  methods: {
    // 获得文章列表信息
    getArticleList () {
      // 把空的筛选条件都过滤掉
      let serchData = {}
      for (var i in this.serchForm) {
        if (this.serchForm[i]) {
          serchData[i] = this.serchForm[i]
        }
      }
      this.$http.get('/articles', { params: this.serchData })
        .then(res => {
          if (res.data.message === 'OK') {
            this.articleList = res.data.data.results
            this.tot = res.data.data.total_count
          }
        })
        .catch(err => {
          return this.$message.error('获取文章列表信息失败' + err)
        })
    },
    // 获得频道
    getChannelList () {
      this.$http
        .get('channels')
        .then(res => {
          if (res.data.message === 'OK') {
            this.channelList = res.data.data.channels
          }
          //   console.log(res)
        })
        .catch(err => {
          return this.$message.error('获取频道错误：' + err)
        })
    }
  }
}
</script>

<style lang="less" scoped>
.box-card {
  margin-bottom: 15px;
}
</style>
